<%@page import="id.co.gomobile.assessment.Item"%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="layout" content="main" />
        <title>Assessment</title>
    </head>
    <body>
    <g:render template="/shared/navigation" />
    
    <div id="body">

    <h1>
    <span id="time-status">Time Remaining: <span id="remainingTime"><em>synchronizing...</em></span></span>
    Page ${currentPage} of ${maxPage}
    </h1>

    <g:if test="${flash.message}">
        <div class="message">${flash.message}</div>
    </g:if>

<div id="itemPage">

<g:render template="items" model="['items': items]" />

</div>

<div id="mainPageNav">
<g:form action="index" method="post" style="display: inline">
    <g:hiddenField name="page" value="${currentPage-2}" />
    <input type="submit" value="Previous" ${currentPage <= 1 ? 'disabled="disabled"' : ''} />
</g:form>

&nbsp;

<g:form action="index" method="post" style="display: inline">
<select id="pageNav" name="page" onchange="this.form.submit()">
<optgroup label="Select Page:">
<g:each var="i" in="${(0..<maxPage)}">
<option value="${i}" ${i == currentPage-1 ? 'selected="selected"' : ''} }>Page ${i+1}</option>
</g:each>
</optgroup>
<optgroup label="----------">
<option value="submit" ${"submit" == currentPage ? 'selected="selected"' : ''} }>Submit</option>
</optgroup>
</select>
</g:form>

&nbsp;

<g:if test="${currentPage >= maxPage}">
<g:form action="submit" method="post" style="display: inline">
    <g:hiddenField name="page" value="submit" />
    <input type="submit" value="Submit" />
</g:form>
</g:if>
<g:else>
<g:form action="index" method="post" style="display: inline">
    <g:hiddenField name="page" value="${currentPage}" />
    <input type="submit" value="Next" />
</g:form>
</g:else>

</div>

    </div>
    
    <script type="text/javascript">
    new PeriodicalExecuter(function(pe) {
    	new Ajax.Request("/assessment/main/remainingTime/${assignment?.id}", {
    	    onSuccess: function(transport) {
    		  var remaining = transport.responseText.evalJSON();
<g:if test="${assignment.test.preference.forceSubmitOnTimeout}">
    		  if(remaining.hours < 0 || remaining.minutes < 0 || remaining.seconds < 0) {
        		  //alert(document.getElementById("pageNav").value);
        		  var s = document.getElementById("pageNav");
        		  s.selectedIndex = s.options.length - 1;
        		  s.onchange();
        		  //alert(document.getElementById("pageNav").value);
    		  }
</g:if>
    		  document.getElementById("remainingTime").innerHTML = remaining.hours + ":" + remaining.minutes + ":" + remaining.seconds; 
    		}
        });
    }, 1);
    </script>
    </body>
</html>